<html>

<head>
	<script src="//unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="//unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
	<script src="//unpkg.com/@jbrowse/react-linear-genome-view@3.0.5/dist/react-linear-genome-view.umd.development.js"
		crossorigin></script>
</head>

<body>
	<div id="jbrowse_linear_genome_view"></div>
	<script type="module">
		import assembly from './assembly.js'
		import tracks from './tracks.js'
		const storageData = JSON.parse(localStorage.getItem('genomeBrowserData'))
		const { createViewState, JBrowseLinearGenomeView } = JBrowseReactLinearGenomeView
		const { createElement } = React
		const { render } = ReactDOM
		const state = new createViewState({
			assembly,
			tracks,
			location: `${storageData.GENE_LOCATION}`,
			defaultSession: {
				name: 'my session',
				view: {
					"id": "linearGenomeView",
					"minimized": false,
					"type": "LinearGenomeView",
					"offsetPx": 44,
					"bpPerPx": 2.000892458723784,
					"displayedRegions": [
						{
							"reversed": false,
							"refName": `${storageData.RefName}`,
							"start": 0,
							"end": 5386,
							"assemblyName": `${storageData.genomeId}.fna`
						}
					],
					"tracks": [
						{
							"id": "IRA9XQVwEEpO9QM50abDy",
							"type": "ReferenceSequenceTrack",
							"configuration": `${storageData.genomeId}.fna-ReferenceSequenceTrack`,
							"minimized": false,
							"displays": [
								{
									"id": "9-4sCOkvVOViuR8PYWJSH",
									"type": "LinearReferenceSequenceDisplay",
									"heightPreConfig": 120,
									"configuration": `${storageData.genomeId}.fna-ReferenceSequenceTrack-LinearReferenceSequenceDisplay`,
									"showForward": true,
									"showReverse": true,
									"showTranslation": true
								}
							]
						},
						{
							"id": "AXVXs0lqQ7vpA3OtOvsgW",
							"type": "FeatureTrack",
							"configuration": `${storageData.genomeId}.gff`,
							"minimized": false,
							"displays": [
								{
									"id": "vUI1j-iXMpcijgClVfEHi",
									"type": "LinearBasicDisplay",
									"configuration": `${storageData.genomeId}.gff-LinearBasicDisplay`
								}
							]
						},
						{
							"id": "AXVXs0lqQ7vpA3OtOvgWs",
							"type": "FeatureTrack",
							"configuration": `PCR_primer_pairs.bed`,
							"minimized": false,
							"displays": [
								{
									"id": "vUI1j-iXMpcijgClVfEHa",
									"type": "LinearBasicDisplay",
									"configuration": `PCR_primer_pairs.bed-LinearBasicDisplay`
								}
							]
						}
					],
					"hideHeader": false,
					"hideHeaderOverview": false,
					"hideNoTracksActive": false,
					"trackSelectorType": "hierarchical",
					"showCenterLine": false,
					"showCytobandsSetting": true,
					"trackLabels": "",
					"showGridlines": true,
					"highlight": [],
					"colorByCDS": false,
					"showTrackOutlines": true
				},
			},
		})
		render(
			createElement(JBrowseLinearGenomeView, { viewState: state }),
			document.getElementById('jbrowse_linear_genome_view'),
		)
	</script>
	<button style="display: none;" id="showsession">Show current session</button>
</body>

</html>